class Snake {
  constructor(el) {
    this.box = 20
    this.el = el
    this.snakeObj = [
      { x: 3, y: 2, color: 'red', el: null },
      { x: 2, y: 2, color: 'green', el: null },
      { x: 1, y: 2, color: 'green', el: null }
    ]
    this.direction = 'right'
  }
  remove() {
    for (let i = 0; i < this.snakeObj.length; i++) {
      if (this.snakeObj[i].el) {
        this.el.removeChild(this.snakeObj[i].el)
      }
    }
  }
  create() {
    this.remove()
    for (let i = 0; i < this.snakeObj.length; i++) {
      let divObj = document.createElement('div')
      divObj.style.width = this.box + 'px'
      divObj.style.height = this.box + 'px'
      divObj.style.position = 'absolute'
      divObj.style.left = this.snakeObj[i].x * this.box + 'px'
      divObj.style.top = this.snakeObj[i].y * this.box + 'px'
      divObj.style.background = this.snakeObj[i].color
      this.snakeObj[i].el = divObj
      this.el.appendChild(divObj)
    }
  }
  move() {
    /*  for (let i = 0; i < this.snakeObj.length; i++) {
       this.snakeObj[i].x += 1
     } */
    for (let i = this.snakeObj.length - 1; i > 0; i--) {
      this.snakeObj[i].x = this.snakeObj[i - 1].x
      this.snakeObj[i].y = this.snakeObj[i - 1].y
    }
    switch (this.direction) {
      case 'top':
        this.snakeObj[0].y -= 1
        break;
      case 'bottom':
        this.snakeObj[0].y += 1
        break;
      case 'left':
        this.snakeObj[0].x -= 1
        break;
      case 'right':
        this.snakeObj[0].x += 1
        break;
    }
    this.create()
  }
}